<template>
  <div>
    <el-dialog title="部门迁移" :visible.sync="dialogVisible" :before-close="handleCancel" center width="800px">
      <el-row type="flex" justify="space-between">
        <el-col :span="9">
          <el-input
            placeholder="请输入部门名称"
            v-model="queryParams.key"
            @keyup.enter.native="getDepartmentList"
            size="small"
          >
            <el-button slot="append" icon="el-icon-search" @click="getDepartmentList" size="small"></el-button>
          </el-input>
        </el-col>
        <el-col :span="6"></el-col>
        <el-col :span="9">
          <el-form ref="deptForm" :rules="rules" :model="checkDeptInfo" size="small">
            <el-form-item prop="deptName">
              <el-input
                placeholder="请选择部门"
                @focus="deptFocus"
                ref="deptInput"
                v-model="checkDeptInfo.deptName"
              ></el-input>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>

      <el-transfer
        v-model="targetKeys"
        :titles="['未关联', '已关联']"
        :props="{ key: 'deptId', label: 'deptName' }"
        :data="deptList"
      ></el-transfer>

      <div slot="footer" class="dialog-footer">
        <el-button @click="handleCancel" size="small">取 消</el-button>
        <el-button type="primary" :disabled="!targetKeys.length" @click="handleOk()" size="small">确 定</el-button>
      </div>
    </el-dialog>

    <dept-tree-modal ref="deptModal" :checkDeptInfo="checkDeptInfo" @deptModalOk="deptModalOk"></dept-tree-modal>
  </div>
</template>

<script>
import DeptTreeModal from './DeptTreeModal'
import { getDepartmentList, moveDepartment } from '../js/auth'

export default {
  name: 'DepartmentMoveModal',
  components: { DeptTreeModal },
  data () {
    return {
      dialogVisible: false,
      queryParams: {},
      checkDeptInfo: {
        deptName: ''
      },
      deptList: [], // 左侧列表
      targetKeys: [], // 右侧值
      rules: {
        deptName: [{ required: true, message: '请选择部门名称!' }]
      }
    }
  },
  methods: {
    // 弹框
    edit () {
      this.dialogVisible = true
      this.getDepartmentList()
    },

    // 部门列表
    async getDepartmentList () {
      const {
        code,
        data: { list }
      } = await getDepartmentList(this.queryParams)
      if (code === 0) {
        this.deptList = list
      }
    },

    // 提交
    handleOk () {
      this.$refs.deptForm.validate(async valid => {
        if (valid) {
          const params = {
            inDeptId: this.checkDeptInfo.deptId,
            outDeptIds: this.targetKeys
          }
          const { code, msg } = await moveDepartment(params)
          if (code === 0) {
            this.$message.success('迁移成功')
            this.$emit('ok')
            this.handleCancel()
          } else {
            this.$message.warning(msg)
          }
        }
      })
    },

    // 输入框获取焦点并手动失去焦点
    deptFocus () {
      this.$refs.deptModal.add()
      this.$refs.deptInput.blur()
    },

    // 部门回调
    deptModalOk (val) {
      this.checkDeptInfo = val
    },

    // 关闭
    handleCancel () {
      this.dialogVisible = false
      this.queryParams = {}
      this.deptList = []
      this.checkDeptInfo = {
        deptName: ''
      }
      this.targetKeys = []
      this.$refs.deptForm.resetFields()
    }
  }
}
</script>

<style lang="scss" scoped>
.dialog-footer {
  text-align: right;
}
/deep/ .el-transfer-panel {
  width: 282px;
  .el-transfer-panel__body {
    height: 300px;
    .el-transfer-panel__list {
      height: 100%;
    }
  }
}
/deep/ .el-transfer__buttons {
  padding: 0 32px;
}

/deep/ .el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
</style>
